<!--  线 + 柱混合图 -->
<template>
  <el-card>
    <template #header>
      <div class="title">
        计划/实际巡检分析(单位:人次)
        <el-date-picker v-model="value1" type="year" @change="f_Change" />
        <!-- <el-select
          v-model="value1"
          style="width: 9vw; margin-bottom: 0.5vh"
          size="small"
          @change="f_Change"
        >
          <el-option label="2024" value="2024" />
          <el-option label="2025" value="2025" />
          <el-option label="2026" value="2026" />
          <el-option label="2027" value="2027" />
          <el-option label="2028" value="2028" />
          <el-option label="2029" value="2029" />
          <el-option label="2030" value="2030" />
        </el-select> -->
      </div>
    </template>

    <div :id="id" :class="className" :style="{ height, width }"></div>
  </el-card>
</template>

<script setup lang="ts">
import moment from "moment";
import * as echarts from "echarts";
import DashboardAPI from "@/api/DashboardAPI";
const value1 = ref("2024");

const jhsjxjfxData = ref({
  jh: [],
  sj: [],
});

const props = defineProps({
  id: {
    type: String,
    default: "barChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "160px",
    required: true,
  },
});

const options = {
  grid: {
    left: "1%",
    right: "1%",
    bottom: "1%",
    top: "16%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },
  legend: {
    itemWidth: 10,
    itemHeight: 4,
    top: "3%",
    left: "center",
    textStyle: {
      fontSize: 12,
      color: "#000",
    },
  },
  xAxis: [
    {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisPointer: {
        type: "shadow",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value} ",
      },
    },
  ],
  series: [
    {
      name: "实际",
      type: "bar",
      smooth: true, // 是否曲线
      barBorderRadius: 4,
      barWidth: 22, //柱子宽度
      data: [],
      itemStyle: {
        color: "#32bebd",
      },
    },
    {
      name: "计划",
      type: "bar",
      barBorderRadius: 4,
      barWidth: 22, //柱子宽度
      data: [],
      itemStyle: {
        color: "#0090ED",
      },
    },
  ],
};

// 计划/实际巡检分析
function f_Init() {
  jhsjxjfxData.value.jh = [];
  jhsjxjfxData.value.sj = [];
  const params = {
    StartTime: moment(value1.value).format("YYYY") + "-01-01 00:00:00",
    EndTime: moment(value1.value).format("YYYY") + "-12-31 23:59:59",
  };
  DashboardAPI.api_insp(params).then(({ data, succeeded }) => {
    if (succeeded) {
      data.forEach((item) => {
        jhsjxjfxData.value.jh.push(item.planTotal);
        jhsjxjfxData.value.sj.push(item.completeTotal);
      });

      console.log(jhsjxjfxData.value);

      options.series[0].data = jhsjxjfxData.value.sj;
      options.series[1].data = jhsjxjfxData.value.jh;

      // 图表初始化
      chart.value = markRaw(
        echarts.init(document.getElementById(props.id) as HTMLDivElement)
      );
      chart.value.setOption(options);
    }
  });
}

function f_Change() {
  f_Init();
}

const chart = ref<any>("");
onMounted(() => {
  f_Init();

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});

onActivated(() => {
  if (chart.value) {
    chart.value.resize();
  }
});
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;

  .download {
    cursor: pointer;

    &:hover {
      color: #32bebd;
    }
  }
}
</style>
